/* 圆角液态玻璃强光边框按钮样式 */
.liquid-glass-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50px; /* 圆角效果 */
  color: var(--color-secondary);
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  outline: none;
}

.liquid-glass-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
  border-radius: 50px; /* 与按钮保持一致的圆角 */
}

.liquid-glass-btn:hover {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4); /* 添加hover时的发光效果 */
}

.liquid-glass-btn:hover::before {
  left: 100%;
}

.liquid-glass-btn:focus {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); /* 添加focus时的外发光效果 */
}

.liquid-glass-btn:active {
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.4);
  transform: scale(0.98); /* 点击时轻微缩小效果 */
}

// /* Element Plus 按钮样式覆盖 */
// .el-button.liquid-glass-btn {
//   border: none;
//   background: rgba(255, 255, 255, 0.1);
//   backdrop-filter: blur(10px);
//   -webkit-backdrop-filter: blur(10px);
//   border: 2px solid;
//   border-image: linear-gradient(45deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3)) 1;
//   border-radius: 50px;
//   color: var(--color-primary);
// }

// .el-button.liquid-glass-btn:hover {
//   border-color: transparent;
//   border-image: linear-gradient(45deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8)) 1;
//   background: rgba(255, 255, 255, 0.3);
//   color: var(--color-primary);
//   box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
// }

// .el-button.liquid-glass-btn:focus {
//   border-color: transparent;
//   border-image: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)) 1;
//   background: rgba(255, 255, 255, 0.15);
//   box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
// }

// .el-button.liquid-glass-btn:active {
//   border-color: transparent;
//   border-image: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5)) 1;
//   background: rgba(255, 255, 255, 0.4);
//   transform: scale(0.98);
// }

/* 按钮不同颜色变体 */
// .liquid-glass-btn--primary {
//   background: rgba(52, 152, 219, 0.2);
//   border-image: linear-gradient(45deg, rgba(100, 180, 240, 0.8), rgba(52, 152, 219, 0.3)) 1;
// }

// .liquid-glass-btn--primary:hover {
//   background: rgba(52, 152, 219, 0.4);
//   border-image: linear-gradient(45deg, rgba(150, 210, 250, 1), rgba(100, 180, 240, 0.8)) 1;
//   box-shadow: 0 0 15px rgba(52, 152, 219, 0.4);
// }

// .liquid-glass-btn--primary:focus {
//   background: rgba(52, 152, 219, 0.25);
//   border-image: linear-gradient(45deg, rgba(120, 200, 250, 0.9), rgba(52, 152, 219, 0.5)) 1;
//   box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
// }

// .liquid-glass-btn--primary:active {
//   background: rgba(52, 152, 219, 0.5);
//   border-image: linear-gradient(45deg, rgba(120, 200, 250, 0.9), rgba(52, 152, 219, 0.5)) 1;
// }

// .liquid-glass-btn--success {
//   background: rgba(46, 204, 113, 0.2);
//   border-image: linear-gradient(45deg, rgba(80, 220, 130, 0.8), rgba(46, 204, 113, 0.3)) 1;
// }

// .liquid-glass-btn--success:hover {
//   background: rgba(46, 204, 113, 0.4);
//   border-image: linear-gradient(45deg, rgba(120, 240, 150, 1), rgba(80, 220, 130, 0.8)) 1;
//   box-shadow: 0 0 15px rgba(46, 204, 113, 0.4);
// }

// .liquid-glass-btn--success:focus {
//   background: rgba(46, 204, 113, 0.25);
//   border-image: linear-gradient(45deg, rgba(100, 240, 150, 0.9), rgba(46, 204, 113, 0.5)) 1;
//   box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.3);
// }

// .liquid-glass-btn--success:active {
//   background: rgba(46, 204, 113, 0.5);
//   border-image: linear-gradient(45deg, rgba(100, 240, 150, 0.9), rgba(46, 204, 113, 0.5)) 1;
// }

// .liquid-glass-btn--danger {
//   background: rgba(231, 76, 60, 0.2);
//   border-image: linear-gradient(45deg, rgba(250, 120, 100, 0.8), rgba(231, 76, 60, 0.3)) 1;
// }

// .liquid-glass-btn--danger:hover {
//   background: rgba(231, 76, 60, 0.4);
//   border-image: linear-gradient(45deg, rgba(255, 150, 130, 1), rgba(250, 120, 100, 0.8)) 1;
//   box-shadow: 0 0 15px rgba(231, 76, 60, 0.4);
// }

// .liquid-glass-btn--danger:focus {
//   background: rgba(231, 76, 60, 0.25);
//   border-image: linear-gradient(45deg, rgba(255, 140, 120, 0.9), rgba(231, 76, 60, 0.5)) 1;
//   box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.3);
// }

// .liquid-glass-btn--danger:active {
//   background: rgba(231, 76, 60, 0.5);
//   border-image: linear-gradient(45deg, rgba(255, 140, 120, 0.9), rgba(231, 76, 60, 0.5)) 1;
// }
